<template>
  <div class="form-Details">
    <div v-if="!auditShow" class="buttonList">
      <el-button :loading="downLoading" @click="handleExport">
        导出数据
      </el-button>
    </div>
    <div class="custom-divider"></div>
    <div ref="pdfTarget" class="content">
      <div class="left">
        <el-descriptions
          title="课题信息"
          :column="1"
          class="custom-description"
        >
          <el-descriptions-item
            v-for="item in topicKeys"
            :key="item.key"
            :label="item.label"
          >
            <span>
              {{ topicInfo[item.key] || '' }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title="项目信息"
          :column="1"
          class="custom-description"
        >
          <el-descriptions-item
            v-for="item in projectKeys"
            :key="item.key"
            :label="item.label"
          >
            <span>{{ projectInfo[item.key] || '' }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title="其它信息"
          :column="1"
          class="custom-description"
        >
          <el-descriptions-item label="上报单位：">
            <span>{{ allocationInfo.creatorDepName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="上报人：">
            <span>{{ allocationInfo.creatorName }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="right">
        <div class="custom-divider-vertical"></div>
        <div class="panel">
          <el-descriptions
            title="拨款信息"
            :column="3"
            border
            class="test-description"
          >
            <el-descriptions-item
              label="年度计划(万元)"
              label-align="right"
              label-class-name="descript-label-width"
            >
              {{ allocationInfo.yearPlan || '-' }}
            </el-descriptions-item>
            <el-descriptions-item
              label="一批拨款(万元)"
              label-align="right"
              label-class-name="descript-label-width"
            >
              {{ allocationInfo.firstAmount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item
              label="二批拨款(万元)"
              label-align="right"
              label-class-name="descript-label-width"
            >
              {{ allocationInfo.secondAmount || '-' }}
            </el-descriptions-item>
            <el-descriptions-item
              label="备注"
              label-align="right"
              label-class-name="descript-label-width"
              :span="24"
            >
              {{ allocationInfo.remark || '-' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {
    topicInfoProps,
    projectInfoProps,
    allocationInfoProps,
    detailsInfoProps,
  } from '../../interface'

  import { useExportPDF } from '@/utils/useExportPDF'
  import { useTimeFormat } from '@/utils/useTimeFormat'
  import { useDictStore } from '@/store/modules/dict'

  const _discStore = useDictStore()
  const { updateTime } = useTimeFormat()
  const route = useRoute()

  // 是否由审核界面进入
  const auditShow = computed(() => route.query?.auditId)

  // 课题信息映射
  const topicKeys = [
    { label: '课题编号：', key: 'id' },
    { label: '课题名称：', key: 'name' },
    { label: '课题负责人：', key: 'leader' },
    { label: '课题类型：', key: 'type' },
    { label: '专业领域：', key: 'subjectAreaText' },
    { label: '研究开始时间：', key: 'researchStartDate' },
    { label: '研究结束时间：', key: 'researchEndDate' },
    { label: '预计投入经费：', key: 'estimatedBudget' },
    { label: '是否需要外协：', key: 'externalCooperationRequired' },
    { label: '承担单位：', key: 'leadingUnitName' },
    { label: '协作单位：', key: 'collaboratingUnit' },
  ]
  // 项目信息映射
  const projectKeys = [
    { label: '项目编号：', key: 'projectNumber' },
    { label: '项目名称：', key: 'projectName' },
    { label: '项目等级：', key: 'projectLevel' },
    { label: '项目类型：', key: 'projectTypeName' },
    { label: '是否重点项目：', key: 'keyProject' },
    { label: '项目负责人：', key: 'headerName' },
  ]

  const props = defineProps<{
    detailsInfo: detailsInfoProps
  }>()
  // 课题信息
  const topicInfo = reactive<Partial<topicInfoProps>>({})
  // 项目信息
  const projectInfo = reactive<Partial<projectInfoProps>>({})
  // 拨款信息
  const allocationInfo = reactive<Partial<allocationInfoProps>>({})
  watch(
    () => props.detailsInfo,
    (value) => {
      if (value.topicInfo) {
        Object.assign(topicInfo, value.topicInfo)

        topicInfo.type = _discStore.getDictLabelForValue(
          'topic_type',
          value.topicInfo.type
        )
        topicInfo.externalCooperationRequired = _discStore.getDictLabelForValue(
          'yes_no',
          value.topicInfo.externalCooperationRequired
        )

        topicInfo.researchStartDate = updateTime(
          value.topicInfo.researchStartDate,
          'YYYY-MM-DD'
        )
        topicInfo.researchEndDate = updateTime(
          value.topicInfo.researchEndDate,
          'YYYY-MM-DD'
        )
      }
      if (value.projectInfo) {
        Object.assign(projectInfo, value.projectInfo)

        projectInfo.keyProject = _discStore.getDictLabelForValue(
          'yes_no',
          value.projectInfo.keyProject
        )
        projectInfo.projectLevel = _discStore.getDictLabelForValue(
          'project_level',
          value.projectInfo.projectLevel
        )
        projectInfo.projectType = _discStore.getDictLabelForValue(
          'project_level',
          value.projectInfo.projectType
        )
      }
      if (value.fundingAppropriationRespVO) {
        Object.assign(allocationInfo, value.fundingAppropriationRespVO)
      }
    },
    {
      immediate: true,
      deep: true,
    }
  )

  // 导出数据
  const pdfTarget = ref<HTMLElement | null>(null)
  const { exportPDF, downLoading } = useExportPDF()
  const handleExport = () => {
    exportPDF({
      target: pdfTarget.value,
      downloadName: '经费拨款单明细',
      scale: 2,
      isDownload: true,
      isNotify: true,
    })
      .then(() => {
        console.log('PDF 下载成功')
      })
      .catch((err) => {
        console.error('PDF 下载失败:', err)
      })
  }
</script>

<style lang="scss" scoped>
  .form-Details {
    display: flex;
    flex-direction: column;

    .buttonList {
      display: flex;
      align-items: center;
      justify-content: end;
    }

    .custom-divider {
      position: relative;
      height: 1px;
      margin: 20px 0;
      background-color: #edeff2;

      &::before {
        position: absolute;
        top: 0;
        right: -20px;
        left: -20px;
        height: 1px;
        content: '';
        background-color: #edeff2;
      }
    }

    .custom-divider-vertical {
      position: relative;
      width: 1px;
      height: 100%; /* 你可以根据需要调整高度 */
      margin: 0 20px 0 0;
      background-color: #edeff2;
      &::before {
        position: absolute;
        top: -20px; /* 你可以根据需要调整上下边距 */
        bottom: -20px; /* 你可以根据需要调整上下边距 */
        left: 0;
        width: 1px;
        content: '';
        background-color: #edeff2;
      }
    }
    .content {
      display: flex;
      flex-grow: 1;
    }
    .select {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .label {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: #606266;
        text-align: right;
      }
    }
    .left {
      width: 423px;
      height: 100%;
      padding: 0 20px 0 0;
    }
    .right {
      display: flex;
      width: calc(100% - 423px);
    }

    :deep(.custom-description) {
      margin-top: 20px;
      &:first-child {
        margin-top: 0px;
      }
      .el-descriptions__header {
        background: #f7f8f9;
        .el-descriptions__title {
          padding: 3px 0 3px 10px;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          color: #606266;
          border: none;
        }
      }

      .el-descriptions__table tr:last-child .el-descriptions__cell {
        padding-bottom: 0 !important;
      }

      .el-descriptions__cell {
        padding-bottom: 10px !important;
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
      }
      .el-descriptions__label {
        display: inline-block;
        width: 84px; /* 根据需要调整宽度 */
        margin-right: 10px !important;
        color: #00000040;
        text-align: right;
      }

      .el-descriptions__content {
        position: relative;
        display: inline-flex;
        max-width: 192px;
        span {
          position: relative; /* 为伪元素定位 */
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis;
          white-space: nowrap; /* 防止内容换行 */
        }
      }
    }

    .panel {
      width: 100%;
    }
    :deep(.test-description) {
      width: 100%;
      margin-bottom: 20px;
      .el-descriptions__title {
        width: 100%;
        height: 28px;
        padding-left: 12px;
        font-size: 14px;
        font-weight: 500;
        line-height: 28px;
        color: #606266;
        background: #f7f8f9;
        border-left: 5px solid #1890ff;
        border-radius: 2px;
      }
      .descript-label-width {
        width: 130px;
      }
    }
  }
</style>
